<template>
	<div class="task-issued">
		<div class="shade"></div>
		<div class="popup">
			<div class="title justify-content-between">
				<span class="fs28 colorFFF">任务下发</span>
				<img src="../assets/images/icon-close.png" @click="cancel">
			</div>
			<div class="content">
				<div class="c-title"><span class="fs20">{{deviceName}}</span><span class="fs18">（{{modelName}}）</span></div>
				<div class="add-box">
					<div class="add-list">
						<div class="label">设备编号：</div>
						<div class="checks equipment">
                            <el-checkbox class="mr30" v-model="equipmentAll" @change="equipmentAllHandle">全部</el-checkbox>
							<el-checkbox-group v-model="equipmentList">
							    <el-checkbox v-for="(item, index) in equipmentData" :key="index" :label="item.deviceNo">{{item.deviceNo}}</el-checkbox>
  							</el-checkbox-group>
						</div>
					</div>
					<div class="add-list">
						<div class="label">阶段过程：</div>
						<div class="checks align-item-center">
                            <el-checkbox class="mr30" v-model="issuedAll" @change="issuedAllHandle">全部下发</el-checkbox>
							<el-checkbox-group v-model="stageList">
							    <el-checkbox label="ZPHJ">装配环节</el-checkbox>
							    <el-checkbox label="ZJCS">整机测试</el-checkbox>
							    <el-checkbox label="YSSY">验收试验</el-checkbox>
							    <el-checkbox label="LXSY">例行试验</el-checkbox>
                                <el-checkbox label="DOC">文档检查</el-checkbox>
  							</el-checkbox-group>
						</div>
					</div>
					<div class="add-list">
						<div class="label">操作终端：</div>
						<div class="checks">
                            <el-radio-group v-model="terminal">
                                <el-radio v-for="(item, index) in terminalData" :key="index" :label="item">{{item}}</el-radio>
                            </el-radio-group>
						</div>
					</div>
					<div class="add-btns justify-content-center">
						<div class="btn sure" v-loading="submitLoading" @click="addTaskGroup">提交</div>
						<div class="btn cancel">取消</div>
					</div>
				</div>
				<div class="theader justify-content-between">
					<div class="w160"></div>
	            	<div class="w331">序号</div>
	            	<div class="w4316">设备编号</div>
	            	<div class="w2020">阶段过程</div>
	            	<div class="w1010">操作终端</div>
	            	<div class="w331">删除</div>
	            </div>
	            <div class="tbodys" v-loading="listLoading">
	            	<div class="tbody justify-content-between" v-for="(item, index) in issuedData">
		            	<div class="w160">
		            		<el-checkbox v-model="item.checked" :disabled="item.disabled"></el-checkbox>
		            	</div>
		            	<div class="w331">{{index + 1}}</div>
		            	<div class="w4316 align-item-center">
		            		<div class="stages">
		            			<div class="stage-item" v-for="(x, y) in item.deviceNo">
		            				<span>{{x}}</span>
		            				<img src="../assets/images/icon-close-small.png" @click="editGroupData(1, index, y)">
		            			</div>
		            		</div>
		            		<!-- <div class="clear" v-if="item.deviceNo" @click="editGroupData(2, index)">清空</div> -->
		            	</div>
		            	<div class="w2020 justify-content-center">
                            <div class="tags">
                                <div class="tag" v-for="(x, y) in item.modelState">
                                    <span>{{x == 'ZPHJ' ? '装配环节' : x == 'ZJCS' ? '整机测试' : x == 'YSSY' ? '验收试验' : x == 'LXSY' ? '例行试验' : '文档检查'}}</span>
                                    <img src="../assets/images/icon-close-small.png" @click="editGroupData(3, index, y)">
                                </div>
                            </div>
		            	</div>
                        <el-tooltip placement="bottom" effect="light">
                            <div slot="content" class="fs18">{{item.operatorClient}}</div>
                            <div class="w1010 text-center text-overflow cursor-pointer">{{item.operatorClient}}</div>
                        </el-tooltip>
		            	<div class="w331 justify-content-center">
		            		<img :src="item.iconDelShow" class="del" v-if="!item.disabled" @click="delGroupData(item.id, index)" @mouseover="item.iconDelShow = iconDelActive" @mouseleave="item.iconDelShow = iconDel">
		            	</div>
		            </div>
	            </div>
			</div>
			<div class="btns justify-content-center">
                <div class="btn sure" v-loading="saveLoading" @click="issued">下发</div>
                <div class="btn cancel" @click="cancel">取消</div>
            </div>
		</div>
        <issued-loading v-if="issuedLoadingS" :lefttime="lefttime" :showProgressR="showProgressR"></issued-loading>
	</div>
</template>

<script>
import IssuedLoading from "@/components/issued-loading"
import Bus from '@/assets/js/bus.js'
export default {
    name: 'TaskIssued',
    components: {IssuedLoading},
    props: {
    	modelId: Number //型号id
    },
    data () {
        return {
            iconDel: require("../assets/images/icon-del-small-gray.png"),
            iconDelActive: require("../assets/images/icon-del-small.png"),
            deviceName: '',
            modelName: '',
            equipmentAll: false,
        	equipmentList: [], //设备编号选择数据
        	equipmentData: [], //设备编号数据
            issuedAll: false, //下发全部
        	stageList: [], //阶段过程选择数据
        	terminal: '', //操作终端选择数据
            terminalData: [], //操作终端数据
        	submitLoading: false, //提交加载中动画
        	listLoading:  false, //请求列表数据加载中动画
            saveLoading: false, //下发请求中动画
            issuedData: [], //分组列表数据
            issuedLoadingS: false,
            lefttime: 5,
            showProgressR: false
        }
    },
    watch: {
        stageList(newVal, oldVal) {
            if (newVal.length == 5) {
                this.issuedAll = true;
            } else {
                this.issuedAll = false;
            }
        },
        equipmentList(newVal) {
            if (newVal.length == this.equipmentData.length) {
                this.equipmentAll = true;
            } else {
                this.equipmentAll = false;
            }
        }
    },
    created() {
    	this.getEquipmentSerial();
        this.getTerminal();
    	this.getGroupData();
    },
    methods: {
        /**
         * 关闭弹窗
         * @param {Number} refresh - 是否刷新列表 1是
         */
    	cancel() {
    		this.$emit('cancel');
    	},
        equipmentAllHandle() {
            if(this.equipmentAll) {
                this.equipmentList = this.equipmentData.map(item => item.deviceNo);
            } else {
                this.equipmentList = [];
            }
        },
        // 下发全部处理
        issuedAllHandle() {
            if (this.issuedAll) {
                this.stageList = ['ZPHJ', 'ZJCS', 'YSSY', 'LXSY', 'DOC'];
            } else {
                this.stageList = [];
            }
        },
    	// 查询设备编号
        getEquipmentSerial() {
            let _this = this;
            let params = {
                deviceId: _this.modelId
            };
            _this.axios.getEquipmentSerial(params).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    _this.equipmentData = res.data;
                }
            }).catch(function (error) {
                _this.$message.error(error.msg);
            });
        },
        // 查询操作终端
        getTerminal() {
            let _this = this;
            _this.axios.getTerminal({}).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    _this.terminalData = res.data;
                }
            }).catch(function (error) {
                _this.$message.error(error.msg);
            });
        },
        // 新增任务下发分组
        addTaskGroup() {
            let _this = this;
            let params = {
                deviceId: _this.modelId,
                deviceNo: _this.equipmentList.toString(),
                modelState: _this.stageList.toString(),
                operatorClient: _this.terminal
            };
            params.modelState = params.modelState == '' ? null : params.modelState;
            if (_this.equipmentList.length == 0) {
                _this.$message({
                    message: '请选择设备编号',
                    type: 'warning'
                });
            } else if (_this.stageList.length == 0) {
                _this.$message({
                    message: '请选择阶段过程',
                    type: 'warning'
                });
            } else if (_this.terminal == '') {
                _this.$message({
                    message: '请选择操作终端',
                    type: 'warning'
                });
            } else {
                _this.submitLoading = true;
                _this.axios.addIssuedGroup(params).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        _this.getGroupData();
                    } else {
                        _this.$message.error(res.msg);
                    }
                    _this.submitLoading = false;
                }).catch(function (error) {
                    _this.submitLoading = false;
                    _this.$message.error(error.msg);
                });
            }
        },
        // 查询下发分组情况
        getGroupData() {
            let _this = this;
            let params = {
                deviceId: _this.modelId
            };
            _this.listLoading = true;
            _this.issuedData = [];
            _this.axios.issuedGroupList(params).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    _this.deviceName = res.data.deviceName;
                    _this.modelName = res.data.modelName;
                   	res.data.list.map(item => {
                        if (item.sendStatus.code == 'N') {
                            item.checked = false;
                            item.disabled = false;
                        } else {
                            item.checked = true;
                            item.disabled = true;
                        }
                    	item.iconDelShow = _this.iconDel;
                    	if (item.deviceNo != '') {
                    		item.deviceNo = item.deviceNo.split(',');
                    	}
                        item.modelState = item.modelState.split(',');
                    	return item;
                    });
                    _this.issuedData = res.data.list;
                }
                _this.listLoading = false;
            }).catch(function (error) {
            	_this.listLoading = false;
                if (error.msg) _this.$message.error(error.msg);
            });
        },
        /**
         * 编辑下发分组
         * @param {Number} type - 编辑类型
         * @param {Number} index - 编辑下标
         * @param {Number} y - 删除设备编号下标
         */
        editGroupData(type, index, y) {
        	let _this = this;
        	let temp = _this.issuedData[index];
            if (temp.sendStatus.code == 'N') {
                if (type == 1) {
                    temp.deviceNo.splice(y, 1);
                } else if (type == 2) {
                    temp.deviceNo = [];
                } else if (type == 3) {
                    temp.modelState.splice(y, 1);
                } else if (type == 4) {
                    temp.operatorClient = '';
                }
                let params = {
                    deviceId: temp.deviceId,
                    id: temp.id,
                    deviceNo: temp.deviceNo.toString(),
                    modelState: temp.modelState.toString(),
                    operatorClient: temp.operatorClient
                }
                _this.listLoading = true;
                _this.axios.editIssuedGroup(params).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        _this.getGroupData();
                    }
                    _this.listLoading = false;
                }).catch(function (error) {
                    _this.listLoading = false;
                    _this.$message.error(error.msg);
                });
            } else {
                _this.$message({
                    message: '已下发数据不允许修改',
                    type: 'warning'
                });
            }
        },
        /**
         * 删除下发分组
         * @param {Number} id - 删除id
         * @param {Number} index - 删除数据下标
         */
        delGroupData(id, index) {
        	let _this = this;
            let temp = _this.issuedData[index];
            if (temp.sendStatus.code == 'N') {
                _this.$confirm('确定删除此任务?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        id: id
                    };
                    _this.listLoading = true;
                    _this.axios.delIssuedGroup(params).then((res) => {
                        console.log(res)
                        if (res.code == 200) {
                            _this.getGroupData();
                        }
                        _this.listLoading = false;
                    }).catch(function (error) {
                        _this.listLoading = false;
                        _this.$message.error(error.msg);
                    });
                }).catch(error => {

                })
            } else {
                _this.$message({
                    message: '已下发数据不允许修改',
                    type: 'warning'
                });
            }
        },
        randomFrom(lowerValue, upperValue) {
            return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
        },
        // 下发
        issued() {
        	let _this = this;
            let newArr = _this.issuedData.map((item) => {
                if (item.sendStatus.code == 'N' && item.checked == true) {
                    return item.id
                } else {
                    return ''
                }
            })
            var ids = newArr.filter((item) => {
                return item && String(item).trim();
            });
            if (ids.toString() == '') {
                _this.$message({
                    message: '请选择下发数据',
                    type: 'warning'
                });
            } else {
                let params = {
                    groupIds: ids.toString()
                };
                // _this.saveLoading = true;
                _this.issuedLoadingS = true;
                _this.lefttime = _this.randomFrom(5, 10);
                _this.axios.issuedGroup(params).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        setTimeout(() => {
                            _this.showProgressR = true;
                            setTimeout(() => {
                                _this.showProgressR = false;
                                _this.issuedLoadingS = false;
                                _this.cancel();
                                Bus.$emit('refreshOverview');
                                Bus.$emit('refreshTaskView');
                            }, 1000)
                        }, _this.lefttime * 1000);
                    } else {
                        _this.showProgressR = false;
                        _this.issuedLoadingS = false;
                        _this.$message.error(res.msg);
                    }
                    // _this.saveLoading = false;
                }).catch(function (error) {
                    // _this.saveLoading = false;
                    _this.showProgressR = false;
                    _this.issuedLoadingS = false;
                    _this.$message.error(error.msg);
                });
            }
            
        }
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
    .task-issued {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;
    	.shade {width: 100%;height: 100%;background: rgba(0,0,0,.3);}
		.popup {width: 1243rem;height: 746rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #FFF;box-shadow: 0 5rem 15rem 0 rgba(0, 21, 54, 0.25);
			.title {width: 100%;height: 58rem;background-color: #285FE3;padding: 0 25rem 0 40rem;
				img {width: 23rem;height: 23rem;cursor: pointer;}
			}
			.content {width: 100%;padding: 0 40rem;
				.c-title {width: 100%;height: 49rem;line-height: 49rem;color: #161D2E;}
				.add-box {width: 100%;height: 234rem;border: 1px solid #D0D6E3;border-radius: 3rem;padding: 0 16rem;position: relative;overflow-y: scroll;scrollbar-width: auto;scrollbar-color: #CCC transparent;
					.add-list {width: 100%;min-height: 50rem;display: flex;align-items: center;border-top: 1px solid #D0D6E3;
						.label {width: 105rem;font-size: 18rem;color: #505971;}
						.checks {width: 50%;flex: 1;}
						.equipment {padding-bottom: 15rem;}
						.equipment .el-checkbox {
							margin-right: 8rem;margin-top: 17rem;
						}
					}
					.add-list:first-child {border-top: 0;}
					.add-btns {width: 100%;margin-top: 16rem;margin-bottom: 13rem;
						.btn {width: 82rem;height: 32rem;margin-left: 68rem;line-height: 32rem;text-align: center;border-radius: 3rem;font-size: 18rem;cursor: pointer;}
		                .btn.sure {background: linear-gradient(0deg, #074DF3 0%, #3183FF 100%);color: #FFF;}
		                .btn.cancel {border: 1px solid #316EFF;background: linear-gradient(0deg, #DADEE8 0%, #FEFFFF 100%);color: #505971;}
		                .btn:first-child {margin-left: 0;}
					}
				}
                /*.add-box::-webkit-scrollbar {display: none;}
                .add-box {scrollbar-width: none;-ms-overflow-style: none;overflow-x: hidden;overflow-y: auto;}*/
				.theader {width: 100%;height: 36rem;margin-top: 10rem;background: #F4F5F8;border: 1px solid #D0D6E3;border-radius: 3rem;padding: 0 45rem 0 28rem;font-size: 18rem;color: #505971;
					div {text-align: center;}
				}
                .tbodys {width: 100%;height: 252rem;overflow-y: scroll;}
                .tbodys::-webkit-scrollbar {display: none;}
                .tbodys {scrollbar-width: none;-ms-overflow-style: none;overflow-x: hidden;overflow-y: auto;}
				.tbody {width: 100%;min-height: 60rem;border: 1px solid #D0D6E3;border-radius: 3rem;padding: 0 45rem 0 28rem;margin-top: 3rem;font-size: 18rem;color: #505971;
					.stages {display: flex;flex-wrap: wrap;}
					.stage-item {min-width: 78rem;height: 24rem;display: flex;align-items: center;justify-content: space-between;padding: 0 7rem 0 10rem;border: 1px solid #AAB3C4;border-radius: 3rem;margin-right: 8rem;margin-top: 2rem;
						span {font-size: 18rem;color: #505971;}
						img {width: 13rem;height: 13rem;cursor: pointer;}
					}
					.stage-item:hover {border: 1px solid #316EFF;}
					.clear {font-size: 18rem;color: #285FE3;text-decoration: underline;margin-left: 12rem;cursor: pointer;flex-shrink: 0;}
                    .tags {display: flex;flex-wrap: wrap;justify-content: space-between;}
					.tag {width: 110rem;height: 24rem;display: flex;align-items: center;justify-content: space-between;padding: 0 8rem 0 10rem;border: 1px solid #AAB3C4;border-radius: 3rem;margin-top: 2rem;
						span {font-size: 18rem;color: #505971;}
						img {width: 13rem;color: 13rem;cursor: pointer;}
					}
					.tag:hover {border: 1px solid #316EFF;}
					.del {width: 27rem;height: 30rem;cursor: pointer;}
					.w331 {text-align: center;}
				}
				.w160 {width: 1.6%;}
				.w331 {width: 3.36%;}
				.w4316 {width: 33.06%;}
                .w2020 {width: 20.8%;}
				.w1010 {width: 10.1%;}
			}
			.btns {width: 100%;position: absolute;bottom: 36rem;
                .btn {width: 130rem;height: 40rem;margin-left: 112rem;line-height: 40rem;text-align: center;border-radius: 3rem;font-size: 22rem;cursor: pointer;}
                .btn.sure {background: linear-gradient(0deg, #00A366 0%, #00C37A 100%);color: #FFF;}
                .btn.cancel {border: 1px solid #316EFF;background: linear-gradient(0deg, #D9DDE8 0%, #FFFFFF 100%);color: #505971;}
                .btn:first-child {margin-left: 0;}
            }
		}
	}
    .mr30 {margin-right: 30px;}

	/deep/ .el-checkbox__label {font-size: 18rem;}
    /deep/ .el-radio__label {font-size: 18rem;}
</style>